<template>
    <div class="platform">
        <my-tag title="个人信息编辑" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" :rules="rules" label-position="top" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left">
                    <el-form-item label="昵称" prop="nickName">
                        <el-input v-model="form.nickName" placeholder="请输入昵称" @focus="userNameLimit = true"
                            @blur="userNameLimit = false" :show-word-limit="userNameLimit" maxlength="20" />
                    </el-form-item>
                    <el-form-item label="授权手机号" prop="phonenumber">
                        <el-input disabled v-model="form.phonenumber" placeholder="请输入授权手机号" />
                    </el-form-item>
                    <el-form-item label="个人介绍" prop="remark">
                        <el-input type="textarea" :autosize="{ minRows: 5 }" v-model="form.remark" placeholder="请输入个人介绍"
                            @focus="introduceLimit = true" @blur="introduceLimit = false" :show-word-limit="introduceLimit"
                            maxlength="500" />
                    </el-form-item>
                </div>
                <div class="form-right">
                    <el-form-item label="头像" prop="avatar">
                        <image-upload v-model="form.avatar" :limit="1" />
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="platform-submit-btn">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button class="default-btn" @click="goBack">返回</el-button>
        </div>
    </div>
</template>
<script setup>
import userAvatar from "../../system/user/profile/userAvatar.vue";
import { getInfo } from '@/api/login'
import { updateUserProfile } from "@/api/system/user";
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const introduceLimit = ref(false)
const userNameLimit = ref(false)
const data = reactive({
    form: {},
    rules: {
        userName: [
            { required: true, message: "请输入昵称", trigger: "blur" }
        ],
        // phonenumber: [
        //     { required: true, message: "请输入授权手机号", trigger: "blur" },
        //     { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的授权手机号", trigger: "blur" }
        // ],
    }
});
const { form, rules } = toRefs(data);
(() => {
    const userId = route.params.userId
    if (userId) {
        getInfo().then((res) => {
            form.value = res.data.user
        })
    }
})()
// 提交按钮
const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            const data = {
                nickName: form.value.nickName,
                remark: form.value.remark,
                avatar: form.value.avatar,
            }
            updateUserProfile(data).then(response => {
                proxy.$modal.msgSuccess("修改成功");
                router.go(-1)
            });
        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
// 返回按钮
const goBack = () => {
    router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: center;

    .header-warn {
        font-family: NotoSansHans, NotoSansHans;
        font-weight: 400;
        font-size: 14px;
        color: #ACB3BD;
        line-height: 21px;
        text-align: right;
        font-style: normal;
        margin-left: 20px;
    }
}
</style>